<template>
  <div>
    <h1>slot</h1>
    <Test>
      <div>
        <pre>大江东去浪淘尽，千古风流人物</pre>
      </div>

      <!-- 具名插槽a v-slot简化指令# -->
      <!-- <template v-slot:a> -->
      <template #a>
        <div>我是填充具名插槽a</div>
      </template>

      <!-- 具名插槽b -->
      <template v-slot:b>
        <div>我是填充具名插槽b</div>
      </template>
    </Test>

    <Test1 :todos="todos">
      <!-- v-slot 简写指令 #default -->
      <!-- <template #default="{ $row, $index }"> -->
      <template v-slot="{ $row, $index }">
        <div :style="{ color: $row.done ? 'red' : 'green' }">
          {{ $row.title }} {{ $index }}
        </div>
      </template>
    </Test1>
  </div>
</template>

<script setup lang="ts">
  // 插槽：默认插槽，具名插槽，作用域插槽
  // 作用域插槽：可以传递数据的插槽，子组件可以将数据回传给父组件
  import { ref } from 'vue'
  import Test from './Test.vue'
  import Test1 from './Test1.vue'

  let todos = ref([
    { id:1, title: '吃饭', done: true },
    { id:2, title: '睡觉', done: false },
    { id:3, title: '打豆豆', done: true },
    { id:4, title: '打游戏', done: true },
  ])
</script>

<style scoped>
</style>